<template>
  <div v-if="total" class="custom-pagination">
    <a-pagination
      :total="total"
      :current="current"
      :page-size="pageSize"
      :show-total="showTotal"
      :show-jumper="showJumper"
      :show-page-size="showPageSize"
      :page-size-options="pageSizeOptions"
      @change="onPageChange"
      @page-size-change="onPageSizeChange"
    />
  </div>
</template>

<script setup>
  const props = defineProps({
    total: {
      type: Number,
      // required: true,
      default: 0,
    },
    current: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 20,
    },
    showTotal: {
      type: Boolean,
      default: true,
    },
    showJumper: {
      type: Boolean,
      default: true,
    },
    showPageSize: {
      type: Boolean,
      default: true,
    },
    pageSizeOptions: {
      type: Array,
      default() {
        return [10, 20, 30, 50, 100, 150, 200, 300, 500];
      },
    },
  });
  const emit = defineEmits(['pageCBK', 'pageSizeCBK']);

  // 页码改变时触发
  const onPageChange = (page) => {
    emit('pageCBK', page);
  };
  // 数据条数改变时触发
  const onPageSizeChange = (limit) => {
    emit('pageSizeCBK', limit);
  };
</script>

<style lang="less" scoped>
  .custom-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 12px;
  }
</style>
